<template>
  <view class="page-user-collect">
    <view class="col-nav flex justify-center align-center">
      <view class="wrap flex justify-center align-center">
        <view v-for="item in colTab" :key="item.type" @click="changeTab(item.type)" class="nav-item flex justify-center align-center" :class="{'active-tab': selected == item.type}">
          {{item.name}}
        </view>
      </view>
    </view>
    <scroll-view class="scroll-view" scroll-y="true">
      <template v-if="selected == 'course'">
        <course-item :is-collect="true" v-for="item in courseList" :key="item.id" :item="item.course" show-close
          @uncollect="handleCollect"></course-item>
          <empty-hold v-if="courseList.length == 0"></empty-hold>
      </template>
      <template v-else>
        <goods-item :is-collect="true" v-for="item in goodsList" :key="item.id" :goods="item.goods" show-close
          @uncollect="goodsUnCollect(item.goods_id)" @detail="toDetail(item.goods_id)"></goods-item>
          <empty-hold v-if="goodsList.length == 0"></empty-hold>
      </template>
    </scroll-view>
  </view>
</template>

<script>
  import CourseItem from "@/components/CourseItem.vue"
  import GoodsItem from "@/components/GoodsItem.vue"
  export default {
    data() {
      return {
        courseList: [],
        goodsList: [],
        page: 1,
        pageSize: 10,
        pageMax: false,
        selected: 'course',
        colTab: [{
            name: '课程',
            type: 'course'
          },
          {
            name: '商品',
            type: 'goods'
          },
        ]
      };
    },
    components: {
      CourseItem,
      GoodsItem
    },
    onLoad() {
      this.getCourse()
    },
    onReachBottom() {
      if (!this.pageMax) {
        this.getCourse()
      }
    },
    methods: {
      toDetail(id) {
        uni.navigateTo({
          url: '/pages/goodsDetail/goodsDetail?goodsId=' + id
        })
      },
      handleCollect(id) {
        uni.showModal({
          title: '提示',
          content: '确定取消收藏吗？',
          success: (res) => {
            if (res.confirm) {
              this.$Api.postToggleCollect({
                course_id: id
              }).then(res => {
                this.page = 1
                this.pageMax = false
                this.courseList = []
                this.getCourse()
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },
      goodsUnCollect(id) {
        uni.showModal({
          title: '提示',
          content: '确定取消收藏吗？',
          success: (res) => {
            if (res.confirm) {
              this.toCollect(id).then(() => {
                this.page = 1
                this.pageMax = false
                this.goodsList = []
                this.getFavGoods()
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },
      async toCollect(gid) {
      	let res = await this.$Api.postFavorite({
      		goods_id: gid
      	})
      	uni.showToast({
      		title: res.msg,
      		icon: 'none'
      	})
      },
      async getCourse() {
        try {
          const {
            data
          } = await this.$Api.getCourseCollection({
            page: this.page,
            pagesize: this.pageSize
          })
          if (data?.data?.length < this.pageSize) {
            this.pageMax = true
          }
          this.courseList = this.courseList.concat(data.data)
          this.page++

        } catch (e) {
          //TODO handle the exception
        }
      },
      
      async getFavGoods() {
        try{
          const {data} = await this.$Api.getGoodsFavs({type: 'favorite',page: this.page, list_rows: this.pageSize})
          if (data?.data?.length < this.pageSize) {
            this.pageMax = true
          }
          this.goodsList = this.goodsList.concat(data.data)
          this.page++
          
        }catch(e){
          //TODO handle the exception
        }
      },
      changeTab(type) {
        this.selected = type
        this.page = 1
        this.pageMax = false
        switch (type) {
          case 'course':
            this.courseList = []
            this.getCourse()
            break;
          case 'goods':
            this.goodsList = []
            this.getFavGoods()
            break;
        }
      }
    }
  }
</script>

<style lang="scss">
  .page-user-collect {
    padding: 0 32rpx;
    background: #F8F8F8;
    min-height: 100vh;

    .col-nav {
      width: 100%;
      height: 84rpx;
      position: fixed;
      top: 0;
      left: 0;

      .wrap {
        width: 320rpx;
        height: 64rpx;
        border-radius: 32rpx;
        background-color: #FFFFFF;
        overflow: hidden;

        .nav-item {
          width: 160rpx;
          height: 64rpx;
        }

        .active-tab {
          background-color: #7644FF;
          color: #ffffff;
        }
      }
    }

    .scroll-view {
      width: 100%;
      height: calc(100vh - 84rpx);
      padding-top: 84rpx;
      
    }

    .course-item {
      background-color: #fff;
      margin-bottom: 16rpx;
      padding: 24rpx;
      border-radius: 16rpx;
    }
  }
</style>